<template>
  <view :class="$style.container">
    <view :class="$style.title">{{ titleName }}</view>

    <view class="flex">
      <view :class="$style.pieChart">
        <qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
      </view>
      <view class="type">
        <button :class="$style.button" @click="getRingChartData('场所分类')">场所分类</button>
        <button :class="$style.button" @click="getRingChartData('气种分类')">气种分类</button>
        <button :class="$style.button" @click="getRingChartData('管压分类')">管压分类</button>
        <button :class="$style.button" @click="getRingChartData('敷设分类')">敷设分类</button>
      </view>
    </view>

  </view>
</template>

<script setup lang='ts'>
import { ref } from "vue";
import { onMounted } from "@vue/runtime-core";

const opts = ref<object>({
  rotate: false,
  rotateLock: false,
  color: [
    "#1890FF",
    "#91CB74",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3CA272",
    "#FC8452",
    "#9A60B4",
    "#ea7ccc",
  ],
  padding: [5, 5, 5, 5],
  dataLabel: true,
  legend: {
    show: false,
  },
  title: {
    name: "10",
    fontSize: 25,
    color: "#FF9900",
  },
  subtitle: {
    name: "本月参与数",
    fontSize: 15,
    color: "#666666",
  },
  extra: {
    ring: {
      ringWidth: 60,
      activeOpacity: 0.5,
      activeRadius: 10,
      offsetAngle: 0,
      labelWidth: 15,
      border: false,
      borderWidth: 3,
      borderColor: "#FFFFFF",
    },
  },
});

const chartData = ref<object>({
  series: [
    {
      data: [
        {
          name: "住房相关",
          value: 3200,
          color: "#4DCCB3",
        },
        {
          name: "食品酒水",
          value: 1020,
          color: "#5A77EC",
        },
        {
          name: "娱乐休闲",
          value: 500,
          color: "#4E94EC",
        },
        {
          name: "交流通讯",
          value: 214.5,
          color: "#4FD4EB",
        },
        {
          name: "其他",
          value: 320.13,
          color: "#B5ED21",
        },
      ],
    },
  ],
});

onMounted(() => { });

function getRingChartData(type: string) {
  console.log(type);
}

const titleName = ref<string>("月度事故统计");
</script>

<style lang='less' module>
.container {
  margin: 20rpx 20rpx 20rpx;
  height: 300rpx;
  background: #ffffff;
  box-shadow: 0px 4px 19px 1px rgba(51, 51, 51, 0.2);
  border-radius: 20px;
  padding: 10rpx 20rpx;

  .title {
    height: 30rpx;
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }

  .pieChart {
    width: 70%;
    height: 250rpx;
  }

  .button {
    font-size: 24rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5678f4;
    width: 200rpx;
    height: 60rpx;
    background: rgba(86, 120, 244, 0.1);
    border-radius: 30rpx;
    margin-bottom: 10rpx;

    &::after {
      border: 0;
    }

    &:hover {
      color: #ffffff;
      background: #5678f4;
    }
  }
}
</style>
